<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
        <h3>电商管理平台</h3>
        <el-button type="info" @click="loginOut">退出登录</el-button>
    </el-header>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="iscollapse ? '64px' : '200px'">
       <div class="collapse" @click="iscollapse =!iscollapse">|  |  |</div>
        <el-menu class="el-menu-vertical-demo"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" 
        unique-opened :collapse="iscollapse" :collapse-transition ="false" router
        :default-active="$route.path== '' ? '2' : $route.path + ''"
         >
         <!-- 一级菜单 -->
         <!-- index得是字符串 -->
          <el-submenu :index="`${auth.id}`" v-for="auth in asideList" :key="auth.id">
            <template slot="title">
              <i :class="iconObj[auth.id]"></i>
              <span>{{auth.authName}}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item-group v-for="auth1 in auth.children" :key="auth1.id" >
              <!-- index得是字符串 跳转到二级菜单的对应路由 router开启了路由模式-->
              <el-menu-item :index="'/' + auth1.path ">
                <i class="el-icon-menu"></i>
                {{auth1.authName}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 内容区域,所有内容组件展示的区域 -->
      <el-main>
        
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
    name:'home',
    data(){
      return{
        // 储存左侧菜单栏
        asideList:[],
        // 储存一级菜单的图标，对应的是一级菜单的ID
        iconObj:{
          '125':'iconfont icon-user',
          '103':'iconfont icon-tijikongjian',
          '101':'iconfont icon-shangpin',
          '102':'iconfont icon-danju',
          '145':'iconfont icon-baobiao',
        },
        // 控制菜单折叠
        iscollapse:false,
      }
    },
    methods:{
      // 退出按钮
      loginOut(){
        // 清空token
        window.sessionStorage.clear('token')
        // 跳转到登录页面
        this.$router.push('/login')
        // 提示
        this.$message.success('退出成功')
      },
      // 发起获取左侧菜单栏请求
      async getmenusList(){
        const {data:result} = await this.$API.get('menus')
        if(result.meta.status == 200 ){
          this.asideList = result.data
        }else{
          this.$message.error(result.data.meta.message)
        }
      },
    },
    mounted(){
      this.getmenusList() 
    }
}
</script>

<style lang="less">
.el-container{
  height: 100%;
  width: 100%;
}
.el-header{
  background-color:#545c64;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-aside{
  background-color:#545c64;
  .el-menu{
    border: none;
  }
  .collapse{
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #c2c2c1;
  }
}
.el-main{
  padding-top: 0;
}
.iconfont{
  margin-right: 10px
}
.el-breadcrumb{
  margin:8px 0;
  line-height: 30px;
}
</style>